<template>
  <div class="search">
    <!-- 搜索组件一级路由   $router.back()返回上一个页面-->
    <van-nav-bar
      left-arrow
      title="搜索中心"
      @click-left="$router.back()">
    </van-nav-bar>

    <!-- https://youzan.github.io/vant/#/zh-CN/search -->
    <van-search
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      v-model.trim="keyword"
      @input="getSuggestions"
    >
    <!--template 只起到一个包裹性质, 最终不会在页面渲染  -->
      <template #action>
        <div @click="clickSearchBtn">搜索</div>
      </template>
    </van-search>

    <!-- 联想建议 -->
    <van-cell-group v-if="keyword">
      <van-cell
      v-for="(item, index) in handlerSuggestionList"
       :key="index"
       icon="search"
       @click="clickSuggest(index)">
        <div v-html="item"></div>
      </van-cell>
    </van-cell-group>
    <!-- /联想建议 -->

    <!-- 搜索历史记录 -->
    <van-cell-group v-else>
      <van-cell title="历史记录"></van-cell>
      <van-cell v-for="(item, index) in history" :key="index" :title="item" @click="clickHistory(item)">
        <van-icon name="close" @click.stop="delHistory(index)"></van-icon>
      </van-cell>
    </van-cell-group>
    <!-- /搜索历史记录 -->
  </div>
</template>

<script>
import { reqGetSuggestions } from '@/api/search'
import { setHistory, getHistory } from '@/utils/storage'
export default {
  name: 'Search',
  data () {
    return {
      keyword: '', // 搜索关键字
      // 联想建议的数据
      suggestionList: [],
      // 历史记录
      history: getHistory(),
      timeId: null
    }
  },
  methods: {
    // 发送请求获取联想建议 --- 发车
    getSuggestions () {
      // 清除上一次的定时任务 保证只有一个定时任务
      clearTimeout(this.timeId)
      this.timeId = setTimeout(async () => {
        // 非空处理
        if (!this.keyword) {
          // 如果搜索关键词没有 清空联想建议
          this.suggestionList = []
          return
        }
        // 发送请求获取联想建议结果
        const { data: { options } } = await reqGetSuggestions(this.keyword)
        // console.log(options)
        this.suggestionList = options
      }, 200)
      // 事件间隔 200 - 300ms
    },
    // 点击搜索按钮
    clickSearchBtn () {
      // keyword 追加
      this.addHistory(this.keyword)
    },
    // 点击联想建议
    clickSuggest (index) {
      // 点击了联想建议 原数组对应的索引项 建议项
      this.addHistory(this.suggestionList[index])
    },
    // 点击历史记录
    clickHistory (item) {
      // 追加点击的历史
      this.addHistory(item)
    },
    // 统一新增历史的方法
    addHistory (str) {
      // console.log(str)
      // 将重复的历史截取掉后 再去前置追加
      const i = this.history.findIndex(item => item === str)
      // 判断i 如果等于-1说明没有直接追加, 不等于-1 截取
      if (i !== -1) {
        this.history.splice(i, 1)
      }
      // 将str前置追加
      this.history.unshift(str)
      // 历史存储
      setHistory(this.history)
      // 路由的跳转并且携带参数 /searchResult
      // 路由传参多个参数可以使用 ?k=v&k=v&k=v query传参 查询字符串
      // 也可以使用对象的方式传递
      // 使用query传参会在地址栏中显示携带参数
      /*   this.$router.push({
        path: '/searchResult',
        query: {
          name: 'zs',
          age: 12,
          gende: 'man'
        }
      }) */

      this.$router.push({
        // path: '/searchResult',
        // 使用params携带参数地址栏中不会显示 , 必须使用name 命名路由跳转
        // 虽然参数携带了,但是刷新会丢失? 解决的方式 配合本地存储(cookie||localStorage)
        name: 'result',
        params: {
          name: 'lisi',
          age: 21,
          gende: 'woman'
        }
      })
    },
    // 删除单个历史记录
    delHistory (i) {
      // console.log(i)
      this.history.splice(i, 1)
      // 历史存储
      setHistory(this.history)
    }
  },
  computed: {
    /*  handlerSuggestionList () {
      return this.suggestionList.map(item => {
        // 1. 拿着变量创建一个正则
        const reg = new RegExp(this.keyword, 'gi')
        const res = item.replace(reg, (str) => {
          return `<span style="color: red">${str}</span>`
        })
        return res
      })
    }
  } */
    handlerSuggestionList () {
      return this.suggestionList.map(item => item.replace(new RegExp(this.keyword, 'gi'), (str) => `<span style="color: red">${str}</span>`))
    }
  }
}
</script>

<style lang="scss" scoped>
.search {
  ::v-deep {
   .van-nav-bar .van-icon{
     color: #fff;
   }
  }
}

</style>
